<template>
	<view class="left clearfix bai">
		<view class="publish-type-title left">
			作品标签
			
			<view class="publish-type-add right" v-if="label.length < 5" @click="labelAddShow = true">
				<uni-icons type="plus-filled" size="25" color="#2979ff"></uni-icons>
			</view>
		</view>
		
		<view class="publish-type-item left">
			<view v-for="(item,index) in label" class="publish-label relative">
				{{item}}
				<view class="publish-label-close absolute" @click="remove(item,index)">
					<uni-icons type="closeempty" size="10" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="publish-label-input left relative" v-if="label.length < 5 && labelAddShow">
				<input placeholder="请输入标签" v-model="labelValue" />
				<label @click="addLabel">确定</label>
			</view>
			
		</view>
	</view>
</template>

<style scoped>
	.publish-label-input label{float:right;line-height:26px;height:26px;background:#2979ff;color:#fff;text-align: center;font-size:12px;border-radius: 3px;width:40px;margin-top:2px;margin-right:2px;}
	.publish-label-input input{float:left;line-height:30px;height:30px;width:60%;font-size:12px;margin-left:5px;}
	.publish-label-input{width:120px;height:30px;line-height:30px;font-size:13px;border-radius: 5px;margin-left:10px;border:1px solid #ccc;margin-top:10px;}
	.publish-type-title{width:90%;margin-left:10px;font-size:14px;font-weight:400;line-height:40px;height:40px;margin-bottom:20px;}
	.publish-type-add{cursor:pointer;}
	.publish-label-close{width:15px;height:15px;top:-8px;right:-8px;background:rgb(0,0,0,.3);line-height:13px;border-radius: 50%;text-align: center;cursor:pointer;}
	.publish-label{float:left;line-height:30px;padding-left:10px;padding-right:10px;background:#f8f8f8;border-radius: 5px;border:1px solid #eee;font-size:12px;color:#666;margin-left:7px;margin-right:10px;margin-top:10px;}
	.publish-type-item{width:100%;height:40px;}
</style>

<script>
	var db = uniCloud.database();
	export default {
		data(){
			return {
				label:['搞笑','爱情','二次元','科技','管理'],
				labelAddShow:false,
				labelValue:''
			}
		},
		methods:{
			//添加标签
			addLabel(){
				var label = this.labelValue;
				if(!label){
					uni.showToast({
						title:'请输入标签',
						icon:'none',
						duration:2000
					})
					
					return false;
				}
				const isExist = this.label.findIndex(item => item === label)!== -1;
				if(isExist){
					uni.showToast({
						title:'已存在相同标签',
						icon:'none',
						duration:2000
					})
					
					return false;
				}
				this.label.push(label);
				this.labelAddShow = false;
				this.$emit('confirm',this.label);
				this.labelValue = '';
			},
			remove(item,index){
				this.label.splice(index,1);
			}
		}
	}
</script>

